<template>
  <div class="u-top">
    <div class="width-limit">
      <div class="left">
        <div class="logo">
          难 书
        </div>
      </div>
      <div class="right">
        <ul>
          <li><div class="switch-btn" @click="changeTheme">Aa</div></li>
          <li v-if="!isLogin">
            <div class="login-btn" @click="goToLogin">登录</div>
          </li>
          <li v-if="!isLogin">
            <div class="register-btn" @click="goToRegister">注册</div>
          </li>
          <li v-if="isLogin">
            <el-dropdown @command="handleCommand">
              <div class="user-area">
                <div class="portrait-area">
                  <img :src="avatar" alt="" />
                </div>
                <i class="iconfont icon-arrow-down-filling"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="home">我的主页</el-dropdown-item>
                <el-dropdown-item command="setting">设置</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li><div class="write-btn" @click="goToPage('add')">写文章</div></li>
        </ul>
      </div>
      <div class="container nav-top">
        <ul>
          <li :class="{ current: current === 'index' }" @click="goToPage('index')"><a>首页</a></li>
          <li v-if="isLogin" :class="{ current: current === 'game' }" @click="goToPage('game')"><a>来摸鱼</a></li>
          <!-- <li v-if="isLogin" :class="{ current: current === 'message' }" @click="goToPage('message')"><a>消息</a></li> -->
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
const defaultAvatar = require('../../../public/images/portrait.jpg')
export default {
  name: 'u-top',
  data () {
    return {
      current: 'index',
      theme: '#ea6f5a'
    }
  },
  methods: {
    changeTheme () {
      document.body.style.setProperty('--primaryColor', this.theme === '#ea6f5a' ? 'blue' : '#ea6f5a')
      this.theme = this.theme === '#ea6f5a' ? 'blue' : '#ea6f5a'
    },
    goToPage (type) {
      if (type !== this.current) {
        this.current = type
        switch (type) {
          case 'index':
            this.$router.push({
              path: '/article/list'
            })
            break
          case 'game':
            this.$router.push({
              path: '/game/list'
            })
            break
          case 'message':
            break
          case 'add':
            this.$router.push({
              path: '/article/add'
            })
            break
          default:
        }
      }
    },
    goToLogin () {
      this.$router.push({
        path: '/user/login'
      })
    },
    goToRegister () {
      this.$router.push({
        path: '/user/register'
      })
    },
    logout () {
      const router = this.$router
      this.$store.dispatch('LOG_OUT').then((res) => {
        router.replace({
          path: '/user/login',
          query: {
            redirect: router.currentRoute.fullPath
          }
        })
      })
    },
    handleCommand (command) {
      switch (command) {
        case 'home':
          this.current = ''
          this.$router.push({
            path: `/home/${this.userInfo.id}`
          })
          break
        case 'logout':
          this.logout()
          break
        case 'setting':
          this.current = ''
          this.$router.push({
            path: '/setting'
          })
          break
        default:
      }
    },
    getProfile () {
      const that = this
      this.$store.dispatch('GET_PROFILE', {}).then((res) => {
        if (res.status === 200) {
          localStorage.setItem('userInfo', JSON.stringify(res.result))
          const result = JSON.parse(JSON.stringify(res.result))
          that.basicForm = {
            avatar: result.avatar,
            telephone: result.telephone,
            userEmail: result.userEmail,
            nickName: result.nickName
          }
          that.personalForm = {
            gender: result.gender,
            brief: result.brief,
            website: result.website
          }
        }
      })
    }
  },
  computed: {
    isLogin () {
      return !!this.$store.state.isLogin || false
    },
    userInfo () {
      return this.$store.state.userInfo
        ? JSON.parse(this.$store.state.userInfo)
        : null
    },
    avatar () {
      if (this.isLogin && this.userInfo.avatar) {
        return this.userInfo.avatar
      } else {
        return defaultAvatar.default
      }
    }
  },
  watch: {
    '$route.path': function (val) {
      if (val === '/article/list' || val === '/') {
        this.current = 'index'
      } else if (val === '/game/list') {
        this.current = 'game'
      } else {
        this.current = ''
      }
    },
    '$store.state': function (val) {
      this.userInfo = val.userInfo ? JSON.parse(val.userInfo)
        : null
    }
  },
  mounted () {
    this.getProfile()
  }
}
</script>
<style scoped>
/* @import url(../../global.css); */
.u-top {
  position: fixed;
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  min-width: 890px;
  background: #fff;
  z-index: 1;
}
.width-limit {
  min-width: 995px;
  max-width: 1440px;
  margin: 0 auto;
}
.u-top .left {
  float: left;
}
.u-top .left .logo {
  height: 56px;
  line-height: 56px;
  color: var(--primaryColor);
  font-size: 24px;
  font-weight: 500;
  padding-left: 15px;
  padding-right: 15px;
}
.u-top .right {
  float: right;
  font-size: 15px;
  text-align: center;
}
.u-top .right li,
.nav-top li {
  float: left;
  height: 56px;
  line-height: 56px;
  cursor: pointer;
}
.nav-top li {
  width: 64px;
  margin-right: 10px;
  text-align: left;
}
.nav-top li a {
  color: #555;
}
.nav-top li.current a {
  color: var(--primaryColor);
}
.nav-top {
  height: 56px;
}
.right > ul > li {
  cursor: pointer;
}
.right .write-btn {
  width: 100px;
  height: 40px;
  line-height: 40px;
  margin: 8px 12px 0;
  border-radius: 20px;
  color: #fff;
  background: var(--primaryColor);
}
.right .register-btn {
  width: 80px;
  height: 38px;
  line-height: 38px;
  margin: 9px 5px 0 15px;
  border: 1px solid rgba(236, 97, 73, 0.7);
  border-radius: 20px;
  color: var(--primaryColor);
  background: transparent;
}
.right .login-btn {
  margin: 11px 6px 0 10px;
  color: #969696;
  padding: 6px 12px;
  line-height: 24px;
}
.right .switch-btn {
  line-height: 20px;
  padding: 17px 10px;
  font-size: 24px;
  color: #969696;
}

.user-area {
  width: 80px;
  height: 40px;
  margin-top: 8px;
  margin-left: 20px;
  display: table;
  line-height: 0;
}
.user-area .portrait-area,
.user-area .portrait-area img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.user-area .portrait-area,
.user-area .iconfont {
  display: table-cell;
  vertical-align: middle;
}
.user-area .iconfont {
  text-align: left;
  padding-left: 5px;
}
</style>
